<template>
    <div style="margin-top:-20px;margin-left:-15px">
        <el-container>
            <el-header style="height:180px">
                 <el-form size="mini" label-width="90px">
                    <el-row style="margin-top:10px">
                      <el-col :span="8"><el-form-item label="订单编号:"><el-input v-model="form.orderNumber" placeholder="请输入订单编号"></el-input></el-form-item></el-col>
                      <el-col :span="8"><el-form-item label="订单状态:">
                          <el-select v-model="form.orderProcessStatus"  style="width:100%">
                            <el-option label="请选择" value=""></el-option>
                            <el-option label="下单" value="0"></el-option>
                            <el-option label="待取件" value="1"></el-option>
                            <el-option label="已取件" value="2"></el-option>
                          </el-select>
                        </el-form-item></el-col>
                      <el-col :span="8"><el-form-item label="付费状态:">
                        <el-select v-model="form.orderPaymentStatus" style="width:100%">                          
                            <el-option label="请选择" value=""></el-option>
                            <el-option label="已付" value="0"></el-option>
                            <el-option label="未付" value="1"></el-option>                  
                        </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5px">
                      <el-col :span="8"><el-form-item label="发件人姓名:"><el-input v-model="form.orderSenderName" placeholder="请输入发件人姓名"></el-input></el-form-item></el-col>
                      <el-col :span="8"><el-form-item label="发件人电话:"><el-input v-model="form.orderSenderPhone" placeholder="请输入发件人电话"></el-input></el-form-item></el-col>
                      <el-col :span="8"><el-form-item label="发件人地址:"><el-input v-model="form.orderTheSenderAddress" placeholder="请输入发件人地址"></el-input></el-form-item></el-col>
                    </el-row>
                    <el-row style="margin-top:5px">
                      <el-col :span="8"><el-form-item label="收件人姓名:"><el-input v-model="form.orderAddresseeName" placeholder="请输入收件人姓名"></el-input></el-form-item></el-col>
                      <el-col :span="8"><el-form-item label="收件人电话:"><el-input v-model="form.orderAddresseePhone" placeholder="请输入收件人电话"></el-input></el-form-item></el-col>
                      <el-col :span="8"><el-form-item label="收件人地址:"><el-input v-model="form.orderRecipientDetailedAddress" placeholder="请输入收件人地址"></el-input></el-form-item></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8" style="margin-top:-10px;margin-left:240px">
                        <el-form-item>
                          <el-button type="primary"  @click="findAll()">查询</el-button>
                          <el-button @click="qk()">重置</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                 </el-form>
            </el-header>
            <el-main style="height:555px">
                <el-table height="300px" :data="Table" style="width: 110%">
                    <el-table-column label="序号" prop="orderId"  height="40"></el-table-column>
                    <el-table-column label="订单编号" prop="orderNumber"  height="40"></el-table-column>
                    <el-table-column label="运单编号" prop="orderWaybillNumber"  height="40"></el-table-column>
                    <el-table-column label="下单时间" prop="orderPlacedate"  height="40">
                      <template slot-scope="scope">
                            <span >{{scope.row.orderPlacedate | time}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" prop="orderProcessStatus"  height="40"></el-table-column>
                    <el-table-column label="发件人" prop="orderSenderName"  height="40"></el-table-column>
                    <el-table-column label="发件人电话" prop="orderSenderPhone"  height="40"></el-table-column>
                    <el-table-column label="发件人地址" prop="orderTheSenderAddress"  height="40"></el-table-column>
                    <el-table-column label="收件人" prop="orderAddresseeName"  height="40"></el-table-column>
                    <el-table-column label="收件人电话" prop="orderAddresseePhone"  height="40"></el-table-column>
                    <el-table-column label="收件人地址" prop="orderRecipientDetailedAddress"  height="40"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="ckxq(scope.row.orderNumber)" class="el-icon-edit"  size="mini" type="warning">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="HandleSizeChange"
                    @current-change="HandleCurrentChange"
                    :current-page="form.page"
                    :page-sizes="[1,2]"
                    :page-size="form.num"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Total">
                </el-pagination>


                <el-dialog style="margin-top:-100px;margin-left:100px" :visible.sync="dialogAddVisible" width="1100px">
                  <template>
                      <el-card class="box-card3">
                          <div >
                              <el-row style="margin-top:-10px">
                                <el-col :span="5">订单编号:<span>  {{this.$store.state.NetOrder.orderNumber}}</span></el-col>
                                <el-col :span="7">运单编号:<span>  {{this.$store.state.NetOrder.orderWaybillNumber}}</span></el-col>
                                <el-col :span="7">下单时间:<span>  {{this.$store.state.NetOrder.orderPlacedate}}</span></el-col>
                              </el-row>
                              <el-row style="margin-top:10px">
                                <el-col :span="5">订单状态:<span>  {{this.$store.state.NetOrder.orderProcessStatus}}</span></el-col>
                                <el-col :span="7">预计到达时间:<span>  {{this.$store.state.NetOrder.orderEstimatedDeliveryTime}}</span></el-col>
                              </el-row>
                          </div>
                </el-card>
                      <el-collapse v-model="activeNames" @change="handleChange" accordion>
                        <el-collapse-item title="基本信息" name="1">
                          <el-card class="box-card2">
                                <el-row>
                                  <el-col :span="24">
                                   <el-descriptions class="margin-top" title="发件人" :column="3" :size="size" border>                               
                                      <el-descriptions-item>
                                      <template slot="label">
                                      <i class="el-icon-user"></i>
                                      姓名
                                      </template>
                                      <span>  {{this.$store.state.NetOrder.orderSenderName}}</span>
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">
                                      <i class="el-icon-mobile-phone"></i>
                                      手机号
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderSenderPhone}}</span>                             
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">
                                      <i class="el-icon-location-outline"></i>
                                      地址
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderTheSenderAddress}}</span>                                    
                                      </el-descriptions-item>
                                    </el-descriptions>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top:10px">
                                <el-col :span="24">
                                    <el-descriptions class="margin-top" title="收件人" :column="3" :size="size" border>                               
                                      <el-descriptions-item>
                                      <template slot="label">
                                      <i class="el-icon-user"></i>
                                      姓名
                                      </template>
                                      <span>  {{this.$store.state.NetOrder.orderAddresseeName}}</span>
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">
                                      <i class="el-icon-mobile-phone"></i>
                                      手机号
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderAddresseePhone}}</span>                             
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">
                                      <i class="el-icon-location-outline"></i>
                                      地址
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderRecipientDetailedAddress}}</span>                                    
                                      </el-descriptions-item>
                                    </el-descriptions>
                                </el-col>
                            </el-row>
                          </el-card>
                        </el-collapse-item>
                        <el-collapse-item title="货品信息" name="2">
                             <el-card class="box-card2">
                                  <div>
                                      
                                  </div>
                              </el-card>
                        </el-collapse-item>
                        <el-collapse-item title="费用信息" name="3">
                             <el-card class="box-card3">
                                <el-row style="margin-top:-5px">
                                  <el-col :span="24">
                                    <el-descriptions class="margin-top"  border>                               
                                      <el-descriptions-item>
                                      <template slot="label">                             
                                      运费
                                      </template>
                                      <span>  {{this.$store.state.NetOrder.orderFeeAmount}}</span>
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">                                    
                                      支付方式
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderPaymentMethods}}</span>                             
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">                                      
                                      支付状态
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderWaybillNumber}}</span>                                    
                                      </el-descriptions-item>
                                    </el-descriptions>
                                  </el-col>
                                </el-row>
                              </el-card>
                        </el-collapse-item>
                        <el-collapse-item title="取件信息" name="4">
                            <el-card class="box-card4">
                                <el-row style="margin-top:-5px">
                                  <el-col :span="24">
                                    <el-descriptions class="margin-top"  border>                               
                                      <el-descriptions-item>
                                      <template slot="label">                             
                                      网点
                                      </template>
                                      <span>  {{this.$store.state.NetOrder.orderWaybillNumber}}</span>
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">                                    
                                      取件类型
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.orderType}}</span>                             
                                      </el-descriptions-item>
                                      <el-descriptions-item>
                                      <template slot="label">                                      
                                      状态
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.networkTmsTaketask | qstatus}}</span>                                    
                                      </el-descriptions-item>                                     
                                    </el-descriptions>
                                  </el-col>
                                </el-row>
                                <el-row style="margin-top:20px">
                                  <el-col :span="24">
                                    <el-descriptions class="margin-top"  border>   
                                      <el-descriptions-item>
                                      <template slot="label">                                      
                                      取件快递员
                                      </template>
                                       <span>  {{this.$store.state.NetOrder.networkTmsTaketask | kd}}</span>                                    
                                      </el-descriptions-item>                            
                                      <el-descriptions-item>
                                      <template slot="label">                             
                                      快递员电话
                                      </template>
                                      <span>  {{this.$store.state.NetOrder.networkTmsTaketask | kdipone}}</span>
                                      </el-descriptions-item>                 
                                     <el-descriptions-item>
                                      <template slot="label">                                      
                                      取件时间
                                      </template>
                                      <span>   {{this.$store.state.NetOrder.networkTmsTaketask | kddate }}</span>                                    
                                      </el-descriptions-item>
                                    </el-descriptions>
                                  </el-col>
                                </el-row>
                            </el-card>
                        </el-collapse-item>
                      </el-collapse>
                  </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
      return{
        activeNames: ['1'],
        dialogAddVisible:false,
        Total:0,
        form:{
          page:1,
          num:2,
          orderNumber:null,
          orderProcessStatus:null,
          orderPaymentStatus:null,
          orderSenderName:null,
          orderSenderPhone:null,
          orderTheSenderAddress:null,
          orderAddresseeName:null,
          orderAddresseePhone:null,
          orderRecipientDetailedAddress:null
        },
        Table:[]
      }
    },
    methods:{
      handleChange(val) {
        console.log(val);
      },
      ckxq(orderNumber){
        this.axios.get('/api/network-tms-order/findBynumberCase?OrderNumber='+orderNumber).then(res=>{
          console.log(res.data)
          this.$store.commit('detailsOrderBynumber',res.data)
        })
          this.dialogAddVisible=true
      },
      qk(){
        this.form={
          page:1,
          num:2,
          orderNumber:null,
          orderProcessStatus:null,
          orderPaymentStatus:null,
          orderSenderName:null,
          orderSenderPhone:null,
          orderTheSenderAddress:null,
          orderAddresseeName:null,
          orderAddresseePhone:null,
          orderRecipientDetailedAddress:null
        }
      },
      HandleSizeChange(val) {
            this.form.num=val
            this.findAll()
        },
        HandleCurrentChange(val) {
            this.form.page=val
             this.findAll()
        },
        findAll(){
            this.axios.post("/api/network-tms-order/orderPageAll",this.form).then(data=>{
                this.Table=data.data.list;
                console.log(data.data)
                this.form.page=data.data.pageNum;
                this.form.num=data.data.pageSize;
                this.Total=data.data.total
                console.log(data)
            })
        }
    },
    created(){
          this.findAll()
    },
    filters:{
        time:(date)=>{
            var dd = new Date(date);
            var y= dd.getFullYear();
            var m=(dd.getMonth()+1).toString().padStart(2,"0");
            var d=(dd.getDate()).toString().padStart(2,"0");
            var s=(dd.getHours()-8).toString().padStart(2,"0")
            var f=(dd.getMinutes()).toString().padStart(2,"0")
            var w=(dd.getSeconds()).toString().padStart(2,"0")
            return y+"-"+m+"-"+d+" "+s+":"+f+":"+w;
        },
          //快递员姓名判断
          kd:(level) =>{
                if(level==undefined){
                  level=""
                }else {
                  return level.luoTackSystemTmsUsers.usersUsername;
                }
                return level;
        },
        //快递员电话
         kdipone:(level) =>{
                if(level==undefined){
                  level=""
                }else {
                  return level.luoTackSystemTmsUsers.usersCustomerCalls;
                }
                return level;
        },
        //快递员取件时间
         kddate:(level) =>{
                if(level==undefined){
                  level=""
                }else {
                  return level.taketaskEndtime;
                }
                return level;
        },
          //支付状态
          zfzt:(level) =>{
                if(level==0){
                  level="未支付"
                }else {
                  level="已支付"
                }
                return level;
        },
        //取件状态
          qstatus:(level) =>{
                if(level==undefined){
                  level=""
                }else {
                  if(level.taketaskType==0){
                    level="待分配"
                  }
                  if(level.taketaskType==1){
                    level="取件中"
                  }
                  if(level.taketaskType==2){
                    level="已交付"
                  }
                  if(level.taketaskType==3){
                    level="入库"
                  }
                    if(level.taketaskType==null){
                    level="无"
                  }
                }
             return level;
        },
        //
    }
}
</script>

<style scoped>
.box-card2 {
    /* background-color: #B3C0D1; */
    width: 1050px;
    height: 270px;
  }
  .box-card3 {
    /* background-color: #B3C0D1; */
    width: 1050px;
    height: 70px;
    
  }
  .box-card4 {
    /* background-color: #B3C0D1; */
    width: 1050px;
    height: 150px;
  }
.el-collapse-item__header{
    /* background-color: #B3C0D1; */
}
.el-header{
    /* background-color: #E9EEF3; */
    color: #333;
    text-align: center;
    line-height: 60px;
    
  }
.el-main {
    /* background-color: #B3C0D1; */
    
    color: #333;
    text-align: center;
  }
  ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #d5d5d5;
  border-radius: 5px;
}
</style>